<template >
  <el-table
    ref="table"
    highlight-current-row
    v-loading="loading"
    :data="data"
    @current-change="handleCurrentRowChange"
    @selection-change="handleSelectionRowChange"
  >
    <el-table-column type="selection" width="50"></el-table-column>
    <el-table-column label="#" type="index" width="80"></el-table-column>
    <slot v-for="column in columns" :name="column.prop" :column="column">
      <el-table-column
        v-if="column.render"
        :label="column.label"
        :prop="column.prop"
        :formatter="column.hasFormatDate ? formatDate : null"
      >
        <template slot-scope="scope">
          <div v-html="column.render(scope.row)"></div>
        </template>
      </el-table-column>
      <el-table-column
        v-else
        :label="column.label"
        :prop="column.prop"
        :formatter="column.hasFormatDate ? formatDate : null"
      />
    </slot>
    <el-table-column label="操作" width="200px">
      <template slot-scope="scope">
        <el-dropdown
          v-if="hasDropdownOperator"
          size="mini"
          split-button
          type="primary"
          @click="
            dropdownClick == null
              ? onDefaultDropdownClick(scope.row)
              : dropdownClick(scope.row)
          "
          @command="
            (command) =>
              dropdownCommand == null
                ? onDefaultDropdownCommand(command)
                : dropdownCommand(command, scope.row)
          "
        >
          {{ dropdownText }}
          <el-dropdown-menu slot="dropdown" v-if="dropdownItems.length > 0">
            <el-dropdown-item
              v-for="(item, index) in dropdownItems"
              :command="item.command"
              :key="index"
              >{{ item.text }}</el-dropdown-item
            >
          </el-dropdown-menu>
        </el-dropdown>
        <span style="margin-left: 10px">
          <el-button
            size="mini"
            type="danger"
            @click="onDelete(scope.$index, scope.row)"
            >删除</el-button
          >
        </span>
      </template>
    </el-table-column>
  </el-table>
</template>
<script>
import util from "@/utils/date";
export default {
  name: "Table",
  props: {
    columns: {
      type: Array,
      default() {
        return [];
      },
    },
    data: {
      type: Array,
      default() {
        return [];
      },
    },
    hasDropdownOperator: {
      type: Boolean,
      default: false,
    },
    dropdownText: {
      type: String,
      default: "编辑",
    },
    dropdownItems: {
      type: Array,
      default() {
        return [{ command: "dropdownItem", text: "下拉菜单" }];
      },
    },
    dropdownClick: {
      type: Function,
      default: null,
    },
    dropdownCommand: {
      type: Function,
      default: null,
    },
    deleteClick: {
      type: Function,
      default: null,
    },
  },
  data() {
    return {
      loading: true,
      selectionRows: [],
    };
  },
  methods: {
    onDefaultDropdownClick(row) {
      console.log(row);
    },
    onDefaultDropdownCommand(command) {
      console.log(command);
    },
    onDelete(index, row) {
      this.deleteClick(index, row);
    },
    formatDate(row, column) {
      const formateColun = this.columns.find((c) => c.prop == column.property);
      const date = row[formateColun.prop];
      return !date || date == ""
        ? ""
        : util.formatDate.format(new Date(date), formateColun.formatter);
    },
    //当前行选择改变
    handleCurrentRowChange(row) {
      this.$refs.table.clearSelection();
      this.selectionRows = [];
      this.$refs.table.toggleRowSelection(row);

      this.emitSelectionRows();
    },
    //复选框选择改变
    handleSelectionRowChange(rows) {
      this.selectionRows = rows;

      this.emitSelectionRows();
    },
    emitSelectionRows() {
      this.$emit("selectionRows", this.selectionRows);
    },
  },
};
</script>
<style >
</style>